<!-- 注册页面 -->
<template>
  <div class="Register">
    <!-- 顶部 注册 -->
    <van-nav-bar title="注册">
      <template #left>
        <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
      </template>
      <template #right>
        <router-link to="/login">登录</router-link>
      </template>
    </van-nav-bar>

    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o" :text="msg"/>
    <!-- 头像 -->
    <van-image class="reg_img" width="100px" height="100px" :src="require('@/assets/avatar/00fb2f5b2c9a39a8012034f76e8c48.jpg')"/>

    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <!-- 用户名 -->
      <van-field v-model="username" clearable name="用户名" label="用户名" placeholder="请输入用户名"
      :rules="[{ required: true },{ pattern: /^\w{6,15}$/, message: '用户名格式错误！' }]"/>
      <!-- 昵称 -->
      <van-field v-model="nickname" clearable name="昵称" label="昵称" placeholder="请输入昵称" :rules="[{ required: true }]"/>
      <!-- 手机号 -->
      <van-field v-model="phone" center clearable label="手机号码" placeholder="请输入手机号码"
        :rules="[{ required: true }, { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误！' }]"/>
      <!-- 短信 -->
      <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true }]">
        <!-- 验证码按钮 -->
        <template #button>
          <!-- 启用 -->
          <van-button v-if="btnStatus" size="small" native-type="button" type="primary" @click="onSms">发送验证码</van-button>
          <!-- 禁用 -->
          <van-button v-else size="small" native-type="button" :disabled="true" type="primary" @click="onSms">{{ content }}</van-button>
        </template>
      </van-field>
      <!-- 密码 -->
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" 
      :rules="[{ required: true },{ pattern: /^\d{6}$/, message: '密码格式错误！' }]"/>
      <!-- 确认密码 -->
      <van-field v-model="passwordState" type="password" name="确认密码" label="确认密码" placeholder="请再次确认密码" 
      :rules="[{ required: true },{ pattern: /^\d{6}$/, message: '密码格式错误！' }]"/>
      <!-- 注册按钮 -->
      <div style="margin: 2.4vh">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { axios_hitokoto1,axios_register } from "@/api/data_axios";
import { verificationRule } from "@/common/js/common";
import { Toast } from "vant";
export default {
  data() {
    return {
      msg:"",  //通知栏

      // 表单基本信息
      username: "",
      nickname: "",
      phone: "",
      password: "",
      passwordState: "",

      // 发送验证码
      sms: "", //用户输入的验证码
      randomNum: "", // 随机生成六位数验证码
      btnStatus: true, //默认启用按钮
      content: "60s后重新发送", //页面显示
      totalTime: 60, //默认值60s
    };
  },
  mounted(){
    this.notice();
  },
  methods: {
    // 通知栏文字
    notice() {
      // 选择输出分类[hitokoto|en|social|soup|fart|zha]，为空默认hitokoto
      let data = {
        type:'soup'
      }
      axios_hitokoto1(data).then(res=>{
        this.msg = res;
      })
    },
    // 定义方法，验证确认密码
    checkRepwd() {
      return this.password === this.passwordState;
    },
    // 定义方法，验证码判断
    checkSms() {
      return this.randomNum === this.sms;
    },
    // 点击注册之后执行，验证表单
    onSubmit() {
      // 验证码验证
      if (this.checkSms()) {
        // 判断密码输入是否一致
        if (this.checkRepwd()) {
          let data = {
            username:this.username,
            password:this.password,
            nickname:this.nickname,
            phone:this.phone,
          }
          axios_register(data).then(res=>{
            if (res.code == 200) {
              Toast.success("注册成功");
              this.$router.push("/login");
            } else {
              Toast.fail("注册失败");
            }
          })
        } else {
          Toast.fail("两次输入的密码不一致");
        }
      } else {
        Toast.fail("验证码不正确");
      }
    },
    // 回退一步
    goBack() {
      this.$router.go(-1);
    },
    // 短信验证码
    onSms() {
      if (verificationRule.mobile(this.phone)) {
        Toast.fail("输入正确的电话号码才能发送验证码");
      } else {
        let num = Math.random().toFixed(6).slice(-6);
        console.log(`给用户电话:${this.phone}发送短信,验证码是:${num}`);
        this.randomNum = num;
        this.btnStatus = false; // 禁用按钮
        // 限制发短信请求,60s一次
        let clock = window.setInterval(() => {
          this.totalTime--;
          this.content = this.totalTime + "s后重新发送";
          if (this.totalTime < 0) {
            window.clearInterval(clock);
            this.totalTime = 60;
            this.btnStatus = true; //这里重新开启
          }
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Register {
  text-align: center;
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .van-nav-bar__right a {
    color: white;
    font-weight: bold;
  }
  .reg_img {
    margin-top: 4.5vh;
    margin-bottom: 4.5vh;
  }
}
</style>
